<template>
  <div class="c-bg-sgray">
    <div class="c-ph24 inva-bg c-pt296 c-p">
      <div @click="showRuleIntro = true" class="rules-entry c-fs22 c-fc-white">邀请规则</div>
      <div class="c-bg-white c-br20 c-minh720">
        <div class="c-flex-row c-justify-center">
          <ul class="tab-list c-mt20 c-mb20 c-flex-row c-justify-center c-alignc-sb c-bg-f2 c-hh56 c-fc-xblack c-liststyle-none c-fs22 c-br30">
            <li v-for="(item, index) in subTabList" @click="handleClickChangeSelect(item.index)" :key="index" class="c-flex-row c-justify-center c-aligni-center"
              :class="selectIndex==item.index ? 'active theme-fc c-fw500' :''">{{item.title}}</li>
          </ul>
        </div>
        <div class="c-fc-gray c-fs22 c-textAlign-c c-mt4">{{startAt}}  至  {{endAt}} </div>
        <div class="c-mt30 c-mb20" v-show="liveList.length>0">
          <div class="c-flex-row c-aligni-center c-pr24 c-w100 c-justify-sb">
            <div class="c-fs22 c-fc-gray c-ww80 c-textAlign-c">排名</div>
            <div class="c-flex-row c-aligni-center c-flex-grow1">
              <div class="c-fs22 c-fc-gray c-ml84 c-text-ellipsis1">昵称</div>
            </div>
            <div class="c-ww100 c-textAlign-r">
              <div class="c-fs22 c-fc-gray c-text-ellipsis1 c-hh48 c-lh48">邀请人数</div>
            </div>
          </div>
        </div>
        <div class="c-content-scroll c-maxh500" id="J_ranklist-scroll" @scroll="rankListScroll">
          <div v-for="(item,index) in liveList" :key="index" class="c-flex-row c-aligni-center c-pr24 c-w100 c-justify-sb c-pb30" v-show="liveList.length>0">
            <div class="c-fs26 c-fc-gray c-ww80 c-flex-row  c-aligni-center">
              <!-- 1 -->
              <div v-if="index==0 || index==1 || index==2" class="c-ww80 c-flex-row  c-aligni-center c-justify-center">
                <img v-if="index==0" :src="$addXossFilter(require('@/assets/i/wap/live/first.png'))" class="c-ww32 c-hh32" alt="" />
                <img v-else-if="index==1" :src="$addXossFilter(require('@/assets/i/wap/live/second.png'))" class="c-ww32 c-hh32" alt="" />
                <img v-else-if="index==2" :src="$addXossFilter(require('@/assets/i/wap/live/third.png'))" class="c-ww32 c-hh32" alt="" />
              </div>
              <div v-else class="c-ww80 c-flex-row  c-aligni-center c-justify-center">
                <div>{{index+1 }}</div>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center c-flex-grow1">
              <img :src="$addXossFilter(item.headimgurl,require('@/assets/defult_head.png'))" class="c-ww72 c-hh72 c-brp50" alt="" />
              <div class="c-fs26 c-fc-xblack c-ml12 c-text-ellipsis1 c-ww280">{{item.nickname}}</div>
            </div>
            <div class="c-ww100 c-textAlign-r">
              <div class="c-fs26 theme-fc c-text-ellipsis1 c-hh48 c-lh48 c-fw-b">{{item.inviteNum}}</div>
            </div>
          </div>
          <loading-status-tem :dataStatus="dataStatus" showNoneTemplate="true"
            noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/integral_rank_none.png" noDataText="还没有人上榜哦"
            class="c-bg-white">
          </loading-status-tem>
        </div>
      </div>
    </div>
    <div class="c-pf c-p-b0 c-bg-white c-w100">
      <div class="c-flex-row c-aligni-center c-ph24 c-w100 c-justify-sb c-pv12">
        <div class="c-fs26 c-fc-gray c-textAlign-c" :class="inviteRank==''?'c-ww60 c-ml22 c-mr36':'c-ml6 c-mr30'">
          {{inviteRank==''?'暂未上榜':inviteRank}}
        </div>
        <div class="c-flex-row c-aligni-center c-flex-grow1">
          <img :src="$addXossFilter(headimgurl,require('@/assets/defult_head.png'))" class="c-ww72 c-hh72 c-brp50" alt="" />
          <div class="c-fs22 c-fc-gray c-ml16">
            <div class="c-fs26 c-fc-xblack c-text-ellipsis1 c-ww240">{{nickname}}</div>
            <div>邀请人数<b class="theme-fc">{{myLiveInviteCount}}</b></div>
          </div>
        </div>
        <div class="c-ph18 c-pv4 c-fs22 c-fc-white theme-bg c-br32" @click="goMyselfInvait">
          查看详情
        </div>
      </div>
    </div>
    <!-- 规则介绍 -->
    <open-modal :openModal='showRuleIntro' @closeModal='showRuleIntro = false'>
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pl40 c-pr40 c-pb40 c-p">
        <div class="c-fs28 c-fw500 c-fc-xblack c-textAlign-c c-pt34 c-pb20">邀请规则</div>
        <div class="c-contexty-scroll c-maxh600">
          <div class="c-fs24 c-fc-xblack c-lh50">
            <p>1、排行榜数据每5分钟更新一次</p>
            <p>2、统计指定时间段内累计邀请人数,一个用户在多个直播间内被同一个人多次邀请的,按第一次成功邀请的时间统计</p>
            <p>3、一个用户被多个用户邀请进同一个直播间,只算第一个邀请成功用户的邀请人数</p>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 100;
export default {
  name: "MyLiveList",
  components: {
    loadingStatusTem,
    OpenModal
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      liveList: [],
      selectIndex: 0,
      subTabList: [{
        title: '日榜',
        index: 0
      }, {
        title: '月榜',
        index: 1
      }, {
        title: '总榜',
        index: 2
      }],
      showRuleIntro:false,
      endAt:'',
      startAt:'',
      myLiveInviteCount:'',
      nickname:'',
      headimgurl:'',
      inviteRank:''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    goMyselfInvait() {
      this.$routerGo(this, "push", {
          path: "/member/myLive/mySelfInvait",
          query: {}
        });
    },
    rankListScroll() {
      let element = document.getElementById('J_ranklist-scroll');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.liveList.length > 0) {
          this.getLiveList();
        }
      })
    },
    handleClickChangeSelect(index) {
      this.selectIndex = index
      this.initData()
    },
    getLiveList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let timeType = this.selectIndex == 0 ? 1 : this.selectIndex == 1 ? 2 : ''
      utilJs.getMethod(
        global.apiurl + "liveFlow/inviteRankingList?page=" + pageIndex + '&limit=' + LIMIT + '&timeType=' + timeType,
        res => {
          if (pageIndex == 1) {
            this.liveList = res.list;
          } else {
            this.liveList = [...this.liveList, ...res.list];
          }
          this.endAt = res.endAt
          this.myLiveInviteCount = res.myLiveInviteCount
          this.headimgurl = res.headimgurl
          this.nickname = res.nickname
          this.startAt = res.startAt
          this.inviteRank = res.inviteRank
          console.log(res && (res.list.length < LIMIT))
          // if (res && (res.list.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.list.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          // } else {
          //   this.dataStatus = 'NO_MORE_DATA';
          //   pageIndex++;
          // }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "排行榜", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("排行榜", "", shareUrl, "");
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.liveList = [];
      let element = document.getElementById('J_ranklist-scroll');
      element.scrollTop = 0;
      this.getLiveList();
    },
  },
  activated() {
    setDocumentTitle("排行榜");
    this.initData()
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
.inva-bg{
  background: url("../../../assets/i/wap/live/invaitBg.png") no-repeat;
  min-height: 21.05rem;
  background-size: 100%;
}
.tab-list {
  padding: 0.15rem;
  li {
    width: 2.5rem;
    height: 1.1rem;
    &.active {
      background: #fff;
      border-radius: 0.75rem;
    }
  }
}
.c-pt296{
  padding-top:7.4rem;
}
.c-ml84{
  margin-left: 2.1rem;
}
.rules-entry {
  position: absolute;
  right: 0;
  top: 0.75rem;
  background: #ffffff1a;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0.5rem 0 0 0.5rem;
  width: 3.2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
}
</style>
